<template>
  <a-card :bordered="false">
    <HeardLayout>
      <template v-slot:right>
        <div>
          <SwitchBar :default-state.sync="switchStatus" :type="1" />
        </div>
      </template>
    </HeardLayout>
    <div>
      <a-form-model ref="ruleForm" :rules="rules" :model="form">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="线上经纪人（个）" prop="brokerNum" :labelCol="{span: 3}" :wrapperCol="{span: 16}">
               <template v-if="!switchStatus">
                <a-input-number
                    v-model="form.brokerNum"
                    :disabled="switchStatus"
                    placeholder="请输入线上经纪人（个）"
                    style="width: 80%"
                    :min="0"
                    :formatter="limitNumber"
                />
               </template>
               <template v-else>
                {{form.brokerNum}}
               </template>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="累计需求信息（单）" prop="demandNum" :labelCol="{span: 3}" :wrapperCol="{span: 16}">
               <template v-if="!switchStatus">
                <a-input-number
                    v-model="form.demandNum"
                    :disabled="switchStatus"
                    placeholder="请输入累计需求信息（单）"
                    style="width: 80%"
                    :min="0"
                    :formatter="limitNumber"
                />
               </template>
               <template v-else>
                {{form.demandNum}}
               </template>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="累计供应信息（单）" prop="supplyNum" :labelCol="{span: 3}" :wrapperCol="{span: 16}">
              <template v-if="!switchStatus">
              <a-input-number
                v-model="form.supplyNum"
                :disabled="switchStatus"
                placeholder="请输入累计供应信息（单）"
                style="width: 80%"
                :min="0"
                :formatter="limitNumber"
              />
              </template>
               <template v-else>
                {{form.supplyNum}}
               </template>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="10" :offset="2">
            <a-form-model-item>
              <a-button v-if="!switchStatus" type="primary" style="margin-bottom: 0; float: right" @click="onSubmit">确定</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </a-card>
</template>

<script>
// import debounce from '@/utils/debounce'
import { getAction, httpAction, putAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import HeardLayout from './components/HeardLayout'
import SwitchBar from './components/SwitchBar'
import JFormContainer from '@/components/jeecg/JFormContainer'
const limitNumber = (value) => {
  if (typeof value === 'string') {
    return !isNaN(Number(value)) ? value.replace(/[^0-9]/g, '') : 0
  } else if (typeof value === 'number') {
    return !isNaN(value) ? String(value).replace(/[^0-9]/g, '') : 0
  } else {
    return 0
  }
}
export default {
  name: 'onlineSupport',
  components: {
    HeardLayout,
    SwitchBar,
    JFormContainer,
  },
//   mixins: [JeecgListMixin, mixinDevice],
  watch: {
    switchStatus(val) {
        console.log(val);
    //   this.loadData()
    },
  },
  data() {
    return {
      limitNumber: limitNumber,
      form: {
        brokerNum: '',
        demandNum: '',
        supplyNum: '',
        id: '',
      },
      disableSubmit: false,
      switchStatus: false,
      description: '线上供需',
      url: {
        list: '/supplyDemand/queryDetail',
        edit: '/supplyDemand/updateById',
      },
      dictOptions: {},
      swchtype: null,
      rules: {
        brokerNum: [{ required: true, message: '请输入线上经纪人（个）', trigger: 'blur' }],
        demandNum: [{ required: true, message: '请输入累计需求信息（单）', trigger: 'blur' }],
        supplyNum: [{ required: true, message: '请输入累计供应信息（单）', trigger: 'blur' }],
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {},
  mounted() {
    this.getinfo()
  },
  methods: {
    initDictConfig() {},
    async getinfo() {
      const res = await getAction(this.url.list)
      this.form.id = res.result.id
      this.form.brokerNum = res.result.brokerNum
      this.form.demandNum = res.result.demandNum
      this.form.supplyNum = res.result.supplyNum
    },
    async editInfo() {
       let params = this.form;
          httpAction(this.url.edit,params,'post').then((res)=>{
            if(res.success){
              this.$message.success(res.message)
              this.getinfo()
            }else{
              this.$message.error(res.message)
            }
       })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
            this.editInfo()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/.ant-form-item-control{
    line-height: 40px !important;
}
</style>
